<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>


</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>借阅管理</cite></a>
          </span>
</div>
<div id="showApp" class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="借阅开始日" name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="借阅截止日" name="end" id="end">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" v-model="params.username" name="username" placeholder="借阅人"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" v-model="params.bookName" name="username" placeholder="书名"
                                   autocomplete="off" class="layui-input">
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <select lay-filter="demo-select-filter">
                                <option value="">借阅状态</option>
                                <option value="1">已归还</option>
                                <option value="0">已借阅</option>

                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" type="button" lay-filter="sreach" @click="getList()"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>

                    </form>
                </div>

                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>

                            <th>图书ID</th>
                            <th>图书名称</th>
                            <th>借阅时间</th>
                            <th>归还时间</th>
                            <th>借阅人</th>
                            <th>借阅状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index)  in list" :key="index">

                            <td>{{item.bookId}}</td>
                            <td>{{item.bookName}}</td>
                            <td>{{item.borrowTime}}</td>
                            <td>{{item.returnTime}}</td>
                            <td>{{item.username}}</td>
                            <td class="td-status">
                                <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled"
                                      v-if="item.status==false">已借阅</span>
                                <span class="layui-btn layui-btn-normal layui-btn-mini" v-else>已归还</span>
                            </td>
                            <td class="td-manage">
                                <a @click="down(item.id)" href="javascript:;" style="margin-right: 30px"
                                   title="点击归还" v-if="item.status==0">
                                    <i class="layui-icon">&#xe62f;</i>
                                </a>
                                <a @click="up(item.bookId)" href="javascript:;" style="margin-right: 30px"
                                   title="点击借阅" v-else>
                                    <i class="layui-icon">&#xe601;</i>
                                </a>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
                <div id="demo-laypage-all"
                     style="float: right">

                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var V_This = null;
    var layer = null;
    var laypage = null;

    var count = 0
    var curr = 1
    var limit = 10

    layui.use(['laydate', 'form', 'laypage', 'layer'], function () {
        var laydate = layui.laydate;
        var form = layui.form;
        layer = layui.layer;
        laypage = layui.laypage


        //执行一个laydate实例
        laydate.render({
            elem: '#start', //指定元素
            type: 'datetime',
            fullPanel: true, // 2.8+
            done: function (value, date, endDate) {
                V_This.params.startTime = value;
            }
        });

        form.on('select(demo-select-filter)', function (data) {
            var value = data.value; // 获得被选中的值
            V_This.params.status = value;

        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end', //指定元素
            type: 'datetime',
            fullPanel: true, // 2.8+
            done: function (value, date, endDate) {
                V_This.params.endTime = value;
            }
        });

        laypage.render({
            elem: 'demo-laypage-all', // 元素 id
            count: count, // 数据总数
            limit: limit,
            curr: curr,
            jump: function (obj, first) {
                count = obj.count;
                curr = obj.curr;
                limit = obj.limit;

                // 首次不执行
                if (!first) {
                    // do something
                }
            }
        });

    });

    let app = new Vue({
        el: "#showApp",
        data: {
            params: {
                username: null,
                bookName: null,
                status: null,
                startTime: null,
                endTime: null,
            },
            list: null
        },
        mounted() {
            V_This = this;
            this.getList();

        },
        methods: {
            getList() {
                var that = this;
                $.ajax({
                        url: "../../borrowBooks/page?pageNo=" + curr + "&pageSize=" + limit,
                        type: "get",
                        data: that.params,
                        success: function (res) {
                            if (res.code == 200) {
                                that.list = res.items;
                                count = res.counts;
                                laypage.render({
                                    elem: 'demo-laypage-all', // 元素 id
                                    count: count, // 数据总数
                                    limit: limit,
                                    curr: curr,
                                    jump: function (obj, first) {
                                        count = obj.count;
                                        curr = obj.curr;
                                        limit = obj.limit;

                                        // 首次不执行
                                        if (!first) {
                                            $.ajax({
                                                    url: "../../borrowBooks/page?pageNo=" + curr + "&pageSize=" + limit,
                                                    type: "get",
                                                    data: that.params,
                                                    success: function (res) {
                                                        if (res.code == 200) {
                                                            that.list = res.items;
                                                            count = res.counts;
                                                        } else {
                                                            layer.msg("获取数据失败")
                                                        }
                                                    },
                                                    error: function (e) {
                                                        layer.msg('数据回显失败', {icon: 5, time: 1000});
                                                    },
                                                }
                                            )
                                        }
                                    }
                                });
                            } else {
                                layer.msg("获取数据失败")
                            }
                        },
                        error: function (e) {
                            layer.msg('数据回显失败', {icon: 5, time: 1000});
                        },
                    }
                )
            },
            up(id) {
                var that = this;
                layer.prompt({title: '请输入用户的id', formType: 2}, function (text, index) {
                    $.ajax({
                            url: "../../borrowBooks/" + id + "/" + text,
                            type: "post",
                            success: function (res) {
                                layer.msg("借阅成功")
                                that.getList();
                                layer.close(index);
                            },
                            error: function (e) {
                                layer.msg('借阅失败', {icon: 5, time: 1000});
                            },
                        }
                    )
                });

            },
            down(id) {
                var that = this;
                $.ajax({
                        url: "../../borrowBooks/" + id,
                        type: "put",
                        success: function (res) {
                            layer.msg("归还成功")
                            that.getList();
                        },
                        error: function (e) {
                            layer.msg('归还失败', {icon: 5, time: 1000});
                        },
                    }
                )
            },
        }


    })
</script>
</html>